<template>
  <div>
    <puplic-modal
      :publicVisible="publicVisible"
      :title="title"
      modalStyle="addEditSupportModal"
      width="560px"
      @cancel="cancel"
      @handleOk="handleOk"
    >
      <div slot="content">
        <a-form :form="form" autocomplete="off" class="formStyle" layout="inline">
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item label="功能名称">
                <a-input
                  v-decorator="[
                    'industryFeaturesName',
                    {
                      rules: [{ required: true, message: '请填写功能名称!' }],
                    },
                  ]"
                  :maxLength="30"
                  auto-size
                  placeholder="请填写"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <div class="imageUpload">
              <a-col :span="13">
                <a-form-item label="功能icon">
                  <a-upload
                    :customRequest="customRequest"
                    :file-list="fileList"
                    :remove="remove"
                    :showUploadList="showUploadList"
                    accept="image/png, image/JPG,image/jpeg"
                    class="avatar-uploader"
                    list-type="picture-card"
                    name="file"
                    @change="picturesChange"
                  >
                    <div v-if="fileList.length < 1">
                      <img alt="" class="pictIcon" src="@/assets/imgs/pict-icon.png" />
                      <p class="imgText">点击上传</p>
                    </div>
                  </a-upload>
                </a-form-item>
              </a-col>
              <a-col :span="11" class="notice">
                <p>注意事项：</p>
                <p>大小保持在200KB以内。</p>
              </a-col>
            </div>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item label="WEB URL">
                <a-input
                  v-decorator="[
                    'webRouteUrl',
                    {
                      rules: [{ required: true, message: '请填写WEB URL!' }],
                    },
                  ]"
                  :maxLength="70"
                  auto-size
                  placeholder="请填写WEB URL"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item label="APP URL">
                <a-input
                  v-decorator="[
                    'appRouteUrl',
                    {
                      rules: [{ required: true, message: '请填写APP URL!' }],
                    },
                  ]"
                  :maxLength="70"
                  auto-size
                  placeholder="请填写APP URL"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item label="小程序 URL">
                <a-input
                  v-decorator="[
                    'miniRouteUrl',
                    {
                      rules: [{ required: true, message: '请填写小程序 URL!' }],
                    },
                  ]"
                  :maxLength="70"
                  auto-size
                  placeholder="请填写小程序 URL"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item label="是否配置">
                <a-radio-group v-model="featuresStatus" name="radioGroup">
                  <a-radio style="color: #478fdb" value="1">是</a-radio>
                  <a-radio style="color: #478fdb" value="0">否</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item label="功能描述">
                <a-textarea
                  v-model="memo"
                  :maxLength="30"
                  placeholder="请输入标题关键字"
                  style="height: 50px; overflow: auto; resize: none"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </puplic-modal>
  </div>
</template>
<script>
import puplicModal from '@/components/publicModal'
// import { comMethods } from '@/mixins/comMethods'
import { uploadFile } from '@/api/api'
import { commitTrim } from '@/utils/util'
import { findEnableDictItemsbyCode } from '@/api/api'
import { industryFeaturesAdd, industryFeaturesEdit } from '@/api/industry'
export default {
  components: { puplicModal },
  // mixins: [comMethods],
  name: 'addEditSupportModal',
  data() {
    return {
      form: this.$form.createForm(this),
      title: '新增',
      publicVisible: false,
      featuresStatus: '1',
      memo: '',
      imgPrefix: '',
      imageUrl: [],
      fileList: [],
      showUploadList: {
        showPreviewIcon: false,
      },
    }
  },
  methods: {
    show(records) {
      this.records = records
      if (records && records.id) {
        this.title = '编辑'
        this.memo = records.memo
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.form.setFieldsValue({ ...records })
          })
        })
        this.featuresStatus = records.featuresStatus.toString()
        if (records.iconUrl) {
          let obj = {
            uid: 0,
            name: 'image.png',
            status: 'done',
            url: this.imgPrefix + records.iconUrl,
          }
          this.fileList[0] = obj
          this.imageUrl[0] = records.iconUrl
        }
      } else {
        this.title = '新增'
      }
      this.getDict()
      this.publicVisible = true
    },

    async getDict() {
      let { result } = await findEnableDictItemsbyCode({ code: 'static_server' })
      this.imgPrefix = result[0].value
    },

    picturesChange(info) {
      info.file.status = 'done'
      this.fileList = info.fileList
    },

    remove(file) {
      let uid = file.uid
      let index = this.fileList.findIndex((v) => {
        return v.uid == uid
      })
      this.imageUrl.splice(index, 1)
    },

    async customRequest(info) {
      const isJpgOrPng =
        info.file.type === 'image/jpeg' || info.file.type === 'image/png' || info.file.type === 'image/jpg'
      if (!isJpgOrPng) {
        this.$message.error('只能上传jpg，png，jpeg格式图片!')
        return
      }
      this.isLt2M = info.file.size / 1024 / 1024 < 2
      if (!this.isLt2M) {
        this.$message.warn('请上传小于200KB的照片!')
      }

      if (isJpgOrPng && this.isLt2M) {
        let file = info.file
        const formData = new FormData()
        formData.append('file', file)
        formData.append('type', 5)
        let res = await uploadFile(formData)
        if (res.code == 200) {
          this.imageUrl.push(res.result.halfPath)
        }
      }
    },
    handleOk() {
      this.form.validateFields((err, values) => {
        if (err != null) {
          return
        }

        if (!this.imageUrl.length) {
          this.$message.warn('请上传图片')
          return
        }

        commitTrim(values)
        let data = {
          memo: this.memo,
          iconUrl: this.imageUrl[0],
          featuresStatus: this.featuresStatus,
          industryInformationId: this.records.industryInformationId,
          ...values,
        }
        console.log(data, 'data')
        if (!this.records.id) {
          industryFeaturesAdd(data).then((res) => {
            this.$message.success(res.message)
            this.cancel()
            this.$emit('refresh')
            this.$emit('loadTree')
          })
        } else {
          industryFeaturesEdit({ id: this.records.id, ...data }).then((res) => {
            this.$message.success(res.message)
            this.cancel()
            this.$emit('refresh')
            this.$emit('loadTree')
          })
        }
      })
    },
    cancel() {
      this.publicVisible = false
      this.memo = ''
      this.form.resetFields()
      this.imageUrl = []
      this.fileList = []
    },
  },
}
</script>
<style lang="less" scoped>
@import '~@/assets/less/common.less';

/deep/ .content {
  padding: 20px;
}
.search-group {
  padding: 10px 0;
}
.imageUpload {
  margin-bottom: 160px;
  /deep/.avatar-uploader {
    > .ant-upload {
      width: 120px;
      height: 120px;
      background: var(--theme-container-bg);
      border: 1px solid var(--theme-input-border);
    }
  }

  .imgText {
    color: #1163b8;
    font-weight: 500;
  }

  .pictIcon {
    margin-bottom: 10px;
    width: 42px;
    height: 38px;
  }

  .notice {
    padding-left: 0;
    padding-top: 15px;
    color: #1163b8;
    font-weight: 500;
  }
}
</style>
